<template>
  <div>
    <el-row>
      <el-col :span="8">
        <span class="edit-title">客户订单号:</span>
        <span class="edit-cont">{{modify_info_data.customerOrderNo}}</span>
      </el-col>
      <el-col :span="6">
        <span class="edit-title">系统订单号:</span>
        <span class="edit-cont">{{modify_info_data.sysOrderNo}}</span>
      </el-col>
      <el-col :span="10">
        <span class="edit-title">车架号:</span>
        <span class="edit-cont">{{modify_info_data.vin}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span class="edit-title">车型名称:</span>
        <span class="edit-cont">{{modify_info_data.styleName}}</span>
      </el-col>
      <el-col :span="12">
        <span class="edit-title">经销商名称:</span>
        <span class="edit-cont">{{modify_info_data.dealerName}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span class="edit-title">客户名称:</span>
        <span class="edit-cont">{{modify_info_data.customerName}}</span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">收车城市:</span>
        <span class="edit-cont">{{modify_info_data.dCity}}</span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">运输距离:</span>
        <span class="edit-cont">{{modify_info_data.distance}} KM(公里)</span>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :span="8">
        <span class="edit-title">订单状态:</span>
        <span class="edit-cont">
          <el-select class="w194" v-model="modify_info_data.orderStatus" placeholder="订单状态" style="width: 184px">
            <el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>
            <el-option :key="1" label="未离昌" value="未离昌"></el-option>
            <el-option :key="2" label="在途" value="在途"></el-option>
            <el-option :key="3" label="交付" value="交付"></el-option>
          </el-select>
        </span>
      </el-col> -->
      <el-col :span="8">
        <span class="edit-title">运输方式:</span>
        <span class="edit-cont">
          <el-select class="w194" v-model="modify_info_data.transportType" placeholder="订单状态">
          <!--<el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>-->
          <el-option :key="1" label="人送" value="人送"></el-option>
          <el-option :key="2" label="零公里" value="零公里"></el-option>
          <el-option :key="3" label="铁运" value="铁运"></el-option>
          <el-option :key="4" label="水运" value="水运"></el-option>
        </el-select>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">承运车队:</span>
        <span class="edit-cont">
          <!--<el-input class="w194" v-model="modify_info_data.supplier"></el-input>-->
          <el-select class="w194" v-model="modify_info_data.supplier"  placeholder="请选择" >
            <el-option
              v-for="(item,index) in supplierList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">发运类型:</span>
        <span class="edit-cont">
          <el-select class="w194" v-model="modify_info_data.shipmentType" placeholder="请选择" >
            <el-option
              v-for="(item,index) in shipmentTypeList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>  
          </el-select>
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span class="edit-title">提车时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.pickTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">入中转库时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.inboundTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">入铁路库时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.enterRailwayTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span class="edit-title">出中联库时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.outboundTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">装车时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.loadTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">离昌时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.leaveTime"

                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
    </el-row>
     <el-row>
      <el-col :span="8">
        <span class="edit-title">司机联系方式:</span>
        <span class="edit-cont">
          <el-input  class="w194" v-model="modify_info_data.driverPhone" placeholder="请输入内容"></el-input>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">车牌号:</span>
        <span class="edit-cont">
          <el-input  class="w194" v-model="modify_info_data.licensePlate" placeholder="请输入内容"></el-input>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">预计送达时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.planShiptoTime"
                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
    </el-row>
    <el-row>
     
      <el-col :span="8">
        <span class="edit-title">送达时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
                          v-model="modify_info_data.shiptoTime"
                          type="datetime"
                          placeholder="选择日期">
        </el-date-picker>
        </span>
      </el-col>
      <el-col :span="8">
        <span class="edit-title">最新在途时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
            v-model="modify_info_data.newestTime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </span>
      </el-col>
      <el-col :span='8'>
        <span class="edit-title">最新在途位置:</span>
        <span class="edit-cont">
          <el-input  class="w194" v-model="modify_info_data.newestPosition" placeholder="请输入内容"></el-input>
        </span>
      </el-col>
    </el-row>
    <el-row>
     
       <el-col :span='8'>
        <span class="edit-title">打单时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
            v-model="modify_info_data.printOrderTime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </span>
      </el-col>
       <el-col :span='8'>
        <span class="edit-title">回单时间:</span>
        <span class="edit-cont">
          <el-date-picker class="w194"
            v-model="modify_info_data.returnOrderTime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </span>
      </el-col>
      <el-col :span='8'>
        <span class="edit-title">备注字段:</span>
        <span class="edit-cont">
          <el-input  class="w194" v-model="modify_info_data.remarkDesc" placeholder="请输入内容"></el-input>
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='8'>
        <span class="edit-title">备注:</span>
        <span class="edit-cont">
          <el-input  class="w194" v-model="modify_info_data.remark" placeholder="请输入内容"></el-input>
        </span>
      </el-col>
     
    </el-row>
    <!-- 另一种方式 目前隐藏 -->
    <el-form :inline="true" label-width="120px" v-show="false">
      <el-form-item label="客户订单号:">{{modify_info_data.customerOrderCode}}</el-form-item>
      <el-form-item label="系统订单号:">{{modify_info_data.orderCode}}</el-form-item>
      <!--<el-form-item label="车架号:">{{modify_info_data.vehicleVin}}</el-form-item>-->
      <el-form-item label="客户名称:">{{modify_info_data.customerName}}</el-form-item>
      <el-form-item label="车型名称:">{{modify_info_data.vehicleName}}</el-form-item>
      <el-form-item label="经销商名称:">{{modify_info_data.agentName}}</el-form-item>
      <el-form-item label="收车城市:">{{modify_info_data.receiptProvince+modify_info_data.receiptCity}}</el-form-item>
      <el-form-item label="运输距离:">{{modify_info_data.miles}} km(公里)</el-form-item>
      <div></div>
      <el-form-item label="订单状态:">
        <el-select class="w194" v-model="modify_info_data.orderStatus" placeholder="订单状态">
          <!--<el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>-->
          <el-option :key="1" label="未离昌" value="未离昌"></el-option>
          <el-option :key="2" label="在途" value="在途"></el-option>
          <el-option :key="3" label="交付" value="交付"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输方式:">
        <el-select class="w194" v-model="modify_info_data.transportType" placeholder="订单状态">
          <!--<el-option v-for ='(item,index) in Lists.orderStatus' :key="index" :label="item.label" :value="item.value"></el-option>-->
          <el-option :key="1" label="人送" value="人送"></el-option>
          <el-option :key="2" label="零公里" value="零公里"></el-option>
          <el-option :key="3" label="铁运" value="铁运"></el-option>
          <el-option :key="4" label="水运" value="水运"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提车时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.pickTime"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入中转库时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入铁路库时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="出中联库时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="装库时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离昌时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="运抵中转库时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="预计送达时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="运抵时间:">
        <el-date-picker class="w194"
          v-model="modify_info_data.customerOrderCode"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
       </el-form-item>
    </el-form>
    <div>
      <div class="edit-table-header">
        <span>在途位置</span>
        <el-button type="primary" class="edit-add-position" :disabled="addFlag"  @click="addFlag=true,addclick()">新增</el-button>
      </div>
      <table class="add-edit-table">
        <tr>
          <th>序号</th>
          <th style="width: 230px">跟踪时间</th>
          <th>所在省份</th>
          <th>所在城市</th>
          <th>所在区县</th>
          <th>详细地址</th>
          <th>经度</th>
          <th>维度</th>
          <th>剩余距离</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in modify_info_data.orderOtdDetails" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.trackTime|formatDate}}</td>
          <td>{{item.province}}</td>
          <td>{{item.city}}</td>
          <td>{{item.area}}</td>
          <td>{{item.address}}</td>
          <td>{{item.longitude}}</td>
          <td>{{item.latitude}}</td>
          <td>{{item.distance}}km</td>
          <td>
            <el-button class="edit-add-position" type="primary" @click="deleteAddInfo(index)">删除</el-button>
          </td>
        </tr>
        <tr v-show="addFlag">
          <td>{{modify_info_data.orderOtdDetails.length+1}}</td>
          <td>
            <el-date-picker
              v-model="trackTimeStr"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
              name
            </el-date-picker>
          </td>
          <td colspan='3'>
            <el-cascader
              placeholder="任意搜索地区"
              :options="areaData"
              filterable
              change-on-select
              v-model="selectedOptions"
              style="width:100%;"
            ></el-cascader>
          </td>

          <td>
            <el-input v-model="newAddress"></el-input>
          </td>
          <td>{{addObj.longitude}}</td>
          <td>{{addObj.latitude}}</td>
          <td>{{addObj.distance}}</td>
          <td>
            <el-button class="edit-add-position" type="primary" @click="addPosition">保存</el-button>
          </td>
        </tr>
      </table>
    </div>
    <el-row style="margin: 10px 0">
      <el-col :span="20"><span>'</span></el-col>
      <el-col :span="4">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" :disabled='savedisabled' :loading='saveloading' @click="confirmSave">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
  import { modifyInfo } from '@/api/order'
  import * as orderAPI from '@/api/order'
  import { getCurrentPosition } from '@/api/address'
  import { formatDate, changeTimeStamp } from '@/utils/date.js'
  import Area from '^/data/area/index.js'
  import { bus } from '@/utils/bus.js'
  export default {
    name: 'edit',
    props: {
      modify_info_data: ''
    },
    data() {
      return {
        name: 'edit',
        supplierList: [],
        shipmentTypeList: [],
        addFlag: false,
        dialogVisible_edit: true,
        addList: [
          { a: '1', b: '1', c: '1', d: '1', e: '1', f: '1', g: '1', h: '1' }
        ],
        trackTimeStr: '',
        addObj: {
          trackTime: '',
          province: '',
          city: '',
          area: '',
          address: '',
          longitude: '',
          latitude: '',
          distance: ''
        },
        areaData: Area, // 省-市-区三级联动选择
        selectedOptions: ['广东省', '深圳市', '南山区'],
        newAddress: '',
        saveloading: false,
        savedisabled: false
      }
    },
    filters: {
      formatDate(time) {
        const date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    created() {
      this.getSupplier()
      this.getShipmentType()
    },
    methods: {
      // 获取承运人
      getSupplier() {
        const that = this
        orderAPI.getSupplier().then(res => {
          if (res.code === 0) {
            that.supplierList = res.data
          }
        })
      },
      // 获取发运类型
      getShipmentType() {
        const that = this
        orderAPI.findShipmentType().then(res => {
          if (res.code === 0) {
            console.log('获取发运类型', res.data)
            that.shipmentTypeList = res.data
          }
        })
      },
      addclick() {
        this.addObj = {
          trackTime: '',
          province: '',
          city: '',
          area: '',
          address: '',
          longitude: '',
          latitude: '',
          distance: ''
        }
        this.selectedOptions = ['', '', '']
        this.trackTimeStr = ''
        this.newAddress = ''
        // console.log('addclick',this.addObj)
      },
      addPosition() {
        this.addObj = {
          trackTime: '',
          province: '',
          city: '',
          area: '',
          address: '',
          longitude: '',
          latitude: '',
          distance: ''
        }
        this.addObj.address = this.newAddress
        this.addObj.trackTime = changeTimeStamp(this.trackTimeStr)

        const selectedOptions = this.selectedOptions
        const [provinceCode, cityCode, areaCode] = selectedOptions
        let _province, _city, _area
        const _areaData = this.areaData
        if (_areaData.length > 0) {
          for (const k in _areaData) {
            if (_areaData[k].value === provinceCode) {
              _province = _areaData[k].label
              const _areaData2 = _areaData[k].children
              for (const k2 in _areaData2) {
                if (_areaData2[k2].value === cityCode) {
                  _city = _areaData2[k2].label
                  const _areaData3 = _areaData2[k2].children
                  for (const k3 in _areaData3) {
                    if (_areaData3[k3].value === areaCode) {
                      _area = _areaData3[k3].label
                      break
                    }
                  }
                }
              }
            }
          }
        }
        this.addObj.province = _province
        this.addObj.city = _city
        this.addObj.area = _area
        const addressDetail = this.addObj.address
        const nowAddress = _province + _city + _area + addressDetail

        const dProvince = this.modify_info_data.dProvince
        const dCity = this.modify_info_data.dCity
        const dAddress = this.modify_info_data.dAddress
        const endAddress = dProvince + dCity + dAddress

        getCurrentPosition(nowAddress, endAddress).then(res => {
          if (res.code === 0) {
            this.addObj.latitude = res.data.latlon.lat
            this.addObj.longitude = res.data.latlon.lng
            this.addObj.distance = res.data.distance
            // console.log('getCurrentPosition', res.data, '界面显示this.addObj', this.addObj)
            this.modify_info_data.orderOtdDetails.push(this.addObj)
          } else {
            console.log('请求出错', res.message)
          }
        }).catch(res => {
          console.warn('error', res)
        })
        this.addFlag = false
      },
      deleteAddInfo(i) {
        this.modify_info_data.orderOtdDetails.splice(i, 1)
      },
      confirmSave() {
        const that = this
        that.saveloading = true
        that.savedisabled = true
        // console.log('that.modify_info_data', that.modify_info_data)
        modifyInfo(that.modify_info_data).then(res => {
          that.saveloading = false
          that.savedisabled = false
          that.dialogVisible_edit = false
          bus.$emit('before-close', that.dialogVisible_edit)
        }).catch(res => {
          that.saveloading = false
          that.savedisabled = false
          console.warn('error', res)
        })
      },
      dialogClose() {
        this.dialogVisible_edit = false
        bus.$emit('before-close', this.dialogVisible_edit)
      }
    }
  }
</script>

<style type="text/css" scoped>
  .el-row{
    margin-bottom: 6px;
  }
  .edit-title{
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .edit-cont{
    font-weight: bold;
  }
  .add-edit-table {
    border-collapse:collapse;
    width: 100%;
  }
  .add-edit-table th{
    color:#878d99
  }
  .add-edit-table th,td{
    border: 1px solid #e6ebf5;
    text-align: center;
  }
  .position-input{
    width: 80px;
  }
  .edit-table-header{
    border-left: 1px solid #e6ebf5;
    border-top: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;
    box-sizing: content-box;
    padding-left: 6px;
  }
  .edit-add-position{
    padding: 2px 10px;
    margin-left: 6px;
  }
</style>
